<template>
  <div class="forum">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>交流论坛</span>
          <div class="header-actions">
            <el-input
              v-model="queryForm.title"
              placeholder="搜索话题"
              prefix-icon="Search"
              style="width: 240px; margin-right: 10px;"
            />
            <el-button type="primary" @click="getList">搜索</el-button>
            <el-button type="success" @click="showNewTopicForm">发布新话题</el-button>
          </div>
        </div>
      </template>
      
      <!-- 论坛分类 -->
      <div class="forum-categories">
        <el-tabs v-model="queryForm.category" @tab-click="handleCategoryChange">
          <el-tab-pane label="全部话题" name=""></el-tab-pane>
          <el-tab-pane label="旅行攻略" name="1"></el-tab-pane>
          <el-tab-pane label="线路推荐" name="2"></el-tab-pane>
          <el-tab-pane label="摄影分享" name="3"></el-tab-pane>
          <el-tab-pane label="装备讨论" name="4"></el-tab-pane>
          <el-tab-pane label="结伴同行" name="5"></el-tab-pane>
        </el-tabs>
      </div>
      
      <!-- 话题列表 -->
      <div class="topic-list">
        <el-table :data="topics" style="width: 100%">
          <el-table-column prop="title" label="话题标题" width="200" fixed>
            <template #default="scope">
              <div class="topic-title-wrapper">
                <el-tag v-if="scope.row.isFirst=='1'" type="warning" size="small">置顶</el-tag>
                <el-tag v-if="scope.row.viewCount>=50" type="danger" size="small">热门</el-tag>
                <router-link :to="'/front/forum/' + scope.row.id" class="topic-title">{{ scope.row.title }}</router-link>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="category" label="分类" width="120">
            <template #default="scope">
              <el-tag :type="getCategoryType(scope.row.category)">{{ getCategoryText(scope.row.category) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createUser" label="作者" width="200"></el-table-column>
          <el-table-column prop="createTime" label="发布时间" width="180"></el-table-column>
          <el-table-column prop="lastReply" label="最后回复" width="180"></el-table-column>
          <el-table-column prop="viewCount" label="浏览" width="80"></el-table-column>
          <el-table-column prop="replyCount" label="回复" width="80"></el-table-column>
        </el-table>
      </div>
      
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      
      <!-- 发布新话题对话框 -->
      <el-dialog
        v-model="newTopicDialogVisible"
        title="发布新话题"
        width="600px"
      >
        <el-form ref="newTopicFormRef" :model="newTopicForm" :rules="newTopicRules" label-width="100px">
          <el-form-item label="话题标题" prop="title">
            <el-input v-model="newTopicForm.title" placeholder="请输入话题标题"></el-input>
          </el-form-item>
          <el-form-item label="话题分类" prop="category">
            <el-select v-model="newTopicForm.category" placeholder="请选择话题分类">
              <el-option label="旅行攻略" value="1"></el-option>
              <el-option label="线路推荐" value="2"></el-option>
              <el-option label="摄影分享" value="3"></el-option>
              <el-option label="装备讨论" value="4"></el-option>
              <el-option label="结伴同行" value="5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="话题内容" prop="content">
            <el-input v-model="newTopicForm.content" type="textarea" :rows="8" placeholder="请输入话题内容"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="newTopicDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitNewTopic" :loading="submittingTopic">发布话题</el-button>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { forumList,forumAdd } from '@/request/forum'


// 当前选中的分类
const activeCategory = ref('all')

// 分页数据
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const queryForm = reactive({
  category: '',
  pageNum: 1,
  pageSize: 10,
  title: ''
})

const getList = ()=>{
  forumList(queryForm).then(res=>{
      topics.value = res.records
      total.value = res.total
  })
}

getList();

// 话题数据
const topics = ref()

// 发布新话题相关
const newTopicDialogVisible = ref(false)
const newTopicFormRef = ref(null)
const submittingTopic = ref(false)
const newTopicForm = reactive({
  title: '',
  category: '',
  content: ''
})

// 新话题表单验证规则
const newTopicRules = {
  title: [
    { required: true, message: '请输入话题标题', trigger: 'blur' },
    { min: 5, max: 100, message: '话题标题长度在 5 到 100 个字符', trigger: 'blur' }
  ],
  category: [
    { required: true, message: '请选择话题分类', trigger: 'change' }
  ],
  content: [
    { required: true, message: '请输入话题内容', trigger: 'blur' },
    { min: 10, max: 5000, message: '话题内容长度在 10 到 5000 个字符', trigger: 'blur' }
  ]
}


// 处理分类切换
const handleCategoryChange = (tab) => {
  queryForm.category = tab.props.name
  queryForm.pageNum = 1
  getList()
}

// 处理页码变化
const handleCurrentChange = (current) => {
  queryForm.pageNum = current
  getList()
}

// 处理每页显示条数变化
const handleSizeChange = (size) => {
  queryForm.pageSize = size
  queryForm.pageNum = 1
  getList()
}

// 显示发布新话题对话框
const showNewTopicForm = () => {
  newTopicDialogVisible.value = true
}

// 提交新话题
const submitNewTopic = () => {
  newTopicFormRef.value.validate((valid) => {
    if (valid) {
      submittingTopic.value = true
      forumAdd(newTopicForm).then(res=>{
        getList()
        ElMessage({ message: '话题发布成功', type: 'success' })
        submittingTopic.value = false
      }).catch(err=>{
        ElMessage({ message: err.message, type: 'error' })
        submittingTopic.value = false
      })
    }
  })
}

// 根据分类获取标签类型
const getCategoryType = (category) => {
  const typeMap = {
    1: 'primary',
    2: 'success',
    3: 'warning',
    4: 'danger',
    5: 'info'
  }
  return typeMap[category] || 'info'
}

// 获取分类文本
const getCategoryText = (category) => {
  const textMap = {
    1: '旅行攻略',
    2: '线路推荐',
    3: '摄影分享',
    4: '装备讨论',
    5: '结伴同行'
  }
  return textMap[category] || '其他'
}

</script>

<style scoped>
.forum {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  align-items: center;
}

.forum-categories {
  margin-top: 20px;
}

.topic-list {
  margin-top: 20px;
}

.topic-title-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.topic-title {
  color: #333;
  text-decoration: none;
  flex: 1;
  min-width: 0;
}

.topic-title:hover {
  color: #1890ff;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>